<template>
  <div id="search">
    <div class="search-content container">
      <div class="searchLayout //data!=null?'show':''//">
        <div class="search-form">
          <span class="search-icon glyphicon glyphicon-search btn-lg"></span>
          <input v-model="searchValue" class="search" placeholder="请输入搜索内容" @keyup.enter="search(0, 10)"/>
          <button class="search-button" v-on:click="search(searchValue, 0, 10)">搜索</button>
        </div>

        <p class="search-empty" v-if="searchKeyword&&data==null">搜索结果为空</p>
      </div>
      <ul v-if="data" class="search-result">
        <p style="color:#777;font-size: 16px;">我们为你找到了
          <nobr>1234</nobr>
          个相关内容
        </p>
        <li class="item" v-for="item in data">
          <a class="title" target="_blank" href="//item.id//"
             v-html="snippet(hightlinghtingTitle(item))">
          </a>

          <p>
            <span class="time" v-bind="'来源: '+item.source"></span>
            <span class="author" v-bind="'作者: '+item.author[0]"></span>
            <span class="time" v-bind="'时间: '+dateFormat(item.updatedDate)"></span>

          </p>

          <div class="item-content" v-html="snippet(hightlinghtingContent(item))"></div>
        </li>
      </ul>
      <span id="content_body" hidden></span>
    </div>
  </div>
</template>

<script>
  export default{
    name: 'search',
    components: {

    },
    props: {},
    data: function () {
      return {
        query: '',   // 搜索字段
        searchKeyword: null,
        searchValue: "",
        data: null
      };
    },
    computed: {},
    ready: function () {
      this.search(this.keywords(),0, 10)
    },
    methods: {
      search: function (start, rows) {
//        let search = this.searchValue || this.keywords();
        let query = search;
        if (search.indexOf("title:") >= 0 || search.indexOf("content:") >= 0) {
        } else {
          // http://172.16.16.136:8983/solr/files/select?fl=title,content,source,author,updatedDate,id&hl.fl=title,content&hl.simple.post=%3C/em%3E&hl.simple.pre=%3Cem%20style=%27key%27%3E&hl=on&indent=on&q=title:%22Flyme%20Design%20App%22%20or%20content=%22Flyme%20Design%20App%22&rows=2&wt=json
          query = 'title:"' + search + '"^10 OR  author:"' + search + '"^9 OR content:"' + search + '"^8' + ' OR "' + search + '"^7' + ' OR ' + search;
        }
        let url = "/search?fl=title,source,author,updatedDate,id&hl.fl=title,content&hl.simple.post=%3C/span%3E&hl.simple.pre=%3Cspan%20class=%27search-key%27%3E&hl=on&q=" + query + "&rows=" + rows + "&start=" + start + "&wt=json";
        this.$http.get(`${url}`, {headers: this.getSafeRequestHeader()}).then(function (response) {
          console.log(response);
          this.response = response;
          if (response.response.docs.length == 0) {
            this.data = null;
          } else {
            this.data = response.response.docs;
          }
          this.searchKeyword = search;
        }, function (error) {
          console.log(error)
        })
      },
      keywords : function () {
        let splits = window.location.href.split(window.location.host);
          let keyword = splits[1].split("=")[1];
          return keyword
      },
      filterContent: function (content, searchValue) {
        if (searchValue == undefined || content == undefined) {
          return content;
        }

        var items = content.split("\n");
        for (var i in items) {
          var index = items[i].toLowerCase().indexOf(searchValue.toLowerCase());
          if (index >= 0) {
            let item = removeHTMLTag(items[i]);
            index = item.toLowerCase().indexOf(searchValue.toLowerCase());
            var line = item.substr(0, index) + '<span class="search-key">' + item.substr(index, searchValue.length) + '</span>' + item.substr(index + searchValue.length, item.length);
            return line
          }
        }
        return items.length > 0 ? removeHTMLTag(items[0]) : removeHTMLTag(content);
      },
      hightlinghtingContent: function (item) {
        if (this.response.highlighting[item.id].content == undefined) {
          return this.filterContent(item.content, $scope.searchKeyword)
        }
        return removeHTMLTag(this.response["highlighting"][item.id].content[0]);
      },
      hightlinghtingTitle: function (item) {
        if (this.response.highlighting[item.id].title == undefined) {
          return this.filterContent(item.title, this.searchKeyword)
        }
        return removeHTMLTag(this.response["highlighting"][item.id].title[0]);
      },
      dateFormat: function (datetime) {
        return new Date(datetime).format("yyyy-MM-dd hh:mm");
      },
      getCookieByName (name) {
        var r = document.cookie.match("\\b" + name + "=([^;]*)\\b");
        return r ? r[1] : undefined;
      },
      getSafeRequestHeader: function () {
        let baseHeaders = {
          'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
        };
        let xsrf = this.getCookieByName("_xsrf");
        if (xsrf !== undefined) {
          baseHeaders["X-XSRFToken"] = xsrf;
        }
        return baseHeaders;
      }
    }
  }
</script>

<style scoped>
/*搜索界面*/

.search-content {
    position: relative;
    margin: 40px auto;
    height: auto;
    min-height: 100%;
    padding: 0 24px;
    background: #fff;
}

.searchLayout {

    width: 100%;
    display: block;
    transition: padding-top 240ms ease-in;
    -moz-transition: padding-top 240ms ease-in; /* Firefox 4 */
    -webkit-transition: padding-top 240ms ease-in; /* Safari and Chrome */
    -o-transition: padding-top 240ms ease-in; /* Opera */
    text-align: left;
    padding: 10% 40px 0 40px;
}

.search-form {
    position: relative;
    margin-top: 10px;
}

.search-icon {
    text-align: center;
    position: absolute;
    left: 8px;
    top: -2px;
    color: #777;
}

.search-result {
    padding: 0 40px 20px 40px;
    margin-top: 20px;
}

.show {
    padding-top: 20px;
}

.search {
    border: 1px solid #e7e7e7;
    height: 40px;
    width: 60%;
    font-size: 16px;
    line-height: 40px;
    padding-left: 60px;
    outline: none;
    color: #777;
    box-sizing: border-box;
}

.search-button {
    display: block;
    width: 60px;
    height: 40px;
    line-height: 40px;
    position: absolute;
    right: 32%;
    top: 0;
    border: 0;
    outline: none;
    background: #387aff;
    color: #fff;
}

.select-key {
    color: #ff0000;
}

.item-content {
    overflow: hidden;
    width: auto;
    max-height: 100px;
    color: #666;
}

.title {
    color: #278eea;
    font-size: 16px;
    font-weight: 700;
    display: inline;
}

.item {
    padding: 22px 0 16px;
    border-bottom: 1px solid #e9e9e9;
}

.author {
    font-size: 10px;
    color: #999;
}

.time {
    font-size: 10px;
    color: #999;
}

.search-empty {
    color: #777;
    margin-top: 20px;
    font-size: 14px;
    margin-left: 20px;
}

@media screen and (max-width: 768px) {

    .searchLayout {
        padding: 6% 0 0 0;
    }

    .search-result {
        padding: 0 0 20px 0;
    }
    .search {
        width: 100%;
    }
    .search-button {
        right: 0;
    }
}
</style>

